<!--短信发送按钮-->
<template>
  <div class="base" :style="{color:(canTouchValue?'#3968FF':'#BBBBBB')}" @click="send">{{titleValue}}</div>
</template>

<script>
export default {
  name: 'smsBtn',
  props: {
    title: {type: String, default: '发送'},
    count: {type: Number, default: 10},
    currentPhoneNum:String, //接收外部手机号码,用于监听字符长度是否满足发送短信条件(辅助条件)
  },
  data () {
    return {
      titleValue: this.title,
      countValue: this.count,
      canTouchValue: false,
      timer: null,
      phoneNum:this.currentPhoneNum, // 用于监听手机号码
    }
  },
  mounted(){
    console.log(this.currentPhoneNum)
  },


  watch: {
    currentPhoneNum:{
      handler(newV,oldV){ //监听手机号是否符合要求, 倒计时+手机号长度不正确时,不允许发送短信
        this.phoneNo = newV;
        if (newV.length === 11 && this.timer){
          this.canTouchValue = false;
        }else if (newV.length ===11 && !this.timer) {
          this.canTouchValue = true;
        }else {
          this.canTouchValue = false;
        }
      },
      immediate:true,
    }
  },
  methods: {
    send () {
      if (this.canTouchValue) {
        this.$emit('smsSend')
        this.canTouchValue = !this.canTouchValue
        this.timer = setInterval(() => {
          this.countValue -= 1
          this.titleValue = this.countValue
          if (this.countValue === 0) {
            this.countValue = this.count
            this.titleValue = '重新发送'
            this.phoneNo.length === 11? this.canTouchValue = true:this.canTouchValue = false;
            clearInterval(this.timer)
            this.timer = null;
          }
        }, 1000)
      }

    },
  },

}
</script>

<style scoped lang="less">
  .base {
  }

</style>
